<template>
  <div>
    <el-form
      :model="obj.value"
      label-width="120px"
      ref="ruleFormRef"
      :rules="rules"
    >
      <el-form-item label="分类" prop="label_class_id">
        <el-select
          v-model="obj.value.label_class_id"
          class="m-2"
          placeholder="Select"
        >
          <el-option
            v-for="item in labellist.value"
            :key="item.id"
            :label="item.class_name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="单位所在地区" prop="country">
        <el-select
          v-model="obj.value.country"
          class="m-2"
          placeholder="单位所在地区"
        >
          <el-option label="国内" value="国内"/>
          <el-option label="国外" value="国外"/>
        </el-select>
      </el-form-item>
      <el-form-item label="地区" prop="area">
        <el-input v-model="obj.value.area" />
      </el-form-item>
      <el-form-item label="名称" prop="name">
        <el-input v-model="obj.value.name" />
      </el-form-item>
      <el-form-item label="法人">
        <el-input v-model="obj.value.legal_representative" />
      </el-form-item>
      <el-form-item label="联系人">
        <el-input v-model="obj.value.contacts" />
      </el-form-item>
      <el-form-item label="职务">
        <el-input v-model="obj.value.duties" />
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="obj.value.telephone" />
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="obj.value.e_mail" />
      </el-form-item>

      <el-form-item
        label="内容"
        v-for="(item, index) in obj.value.content"
        :key="item"
      >
        <div style="display: block; width: 100%">
          <el-input v-model="item.title" />
        </div>
        <div
          style="
            display: block;
            width: 800px;
            margin-top: 20px;
            position: relative;
          "
        >
          <wange
            @issuevalue="getHtml"
            :index="index"
            :valueHtml="item.text"
          ></wange>
          <span
            style="
              position: absolute;
              top: 0;
              right: -50px;
              font-size: 20px;
              cursor: pointer;
            "
            @click="delconteng(index)"
          >
            <el-icon :size="20"> <Delete /> </el-icon
          ></span>
        </div>
      </el-form-item>
      <el-form-item label=" ">
        <el-button type="primary" @click="addcontent">新增内容</el-button>
        <el-button type="primary" @click="submit(ruleFormRef)">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { defineComponent, reactive, watch, ref } from "vue";
import { labelClassLists, labelEdit, schoolDetails } from "../../api/api";
import { Delete } from "@element-plus/icons-vue";
import wange from "./wangeditor.vue";
import { useRoute, useRouter } from "vue-router";
let $route = useRoute();
let ruleFormRef = ref();
let obj = reactive({
  value: {
    label_class_id: "", //分类
    area: "", //地区
    name: "", //名称
    legal_representative: "", //法人
    contacts: "", //联系人
    telephone: "", //手机号
    e_mail: "", //邮箱
    duties: "",
    country:'',//单位所在地区
    content: [],
  },
});

const rules = reactive({
  label_class_id: [
    { required: true, message: "请选择分类", trigger: "change" },
  ],
  country: [
    { required: true, message: "请选择", trigger: "change" },
  ],
  area: [{ required: true, message: "请输入地区", trigger: "blur" }],
  name: [{ required: true, message: "请输入标题", trigger: "blur" }],
});

//-------------------------------------------获取分类
let labellist = reactive({ value: [] });
const getclass_label = () => {
  labelClassLists({}).then((res) => {
    labellist.value = res.data;
  });
};
getclass_label();
//-------------------------------------------获取分类

//------------------------------------------获取详情

const getdetails = () => {
  // let noticedetails = document.getElementsByClassName("noticedetails");
  //   let right = document.getElementsByClassName("right");
  schoolDetails({ label_id: $route.query.id }).then((res) => {
    obj.value = res.data;
    console.log(obj.value);
  });
};
getdetails();
//------------------------------------------end获取详情

//-------------------------------------------新增内容

const addcontent = () => {
  obj.value.content.push({ title: "", text: "" });
};

const delconteng = (index: number) => {
  obj.value.content.splice(index, 1);
};
//-------------------------------------------end新增内容

//-------------------------------------------获取html

const getHtml = (value: any) => {
  obj.value.content[value.index].text = value.html;
};

//-------------------------------------------end获取html

//-------------------------------------------保存内容

const submit = async (formEl: any) => {
  if (!formEl) return;
  await formEl.validate((valid: any, fields: any) => {
    if (valid) {
      let jsonobj:any = { ...obj.value, label_id: $route.query.id }
      jsonobj = JSON.stringify(jsonobj)
      labelEdit(jsonobj).then((res) => {
        // console.log(`https://arts.edtzk.com/admin/school/labelLists?id=${$route.query.id}`);
        window.location.href=`https://arts.edtzk.com/admin/school/labelLists?id=${$route.query.schoolId}`;
      });
    } else {
      console.log("error submit!", fields);
    }
  });
};

//-------------------------------------------end保存内容
</script>

<style lang="scss" scoped>
:deep(.el-input) {
  width: 400px;
}
</style>
